
.course-record{
    padding: 0 20px;
    .month-courses{
        .top{
            margin: 20px 0 10.4px 0;
            font-size: 34px;
            line-height: 36px;
            font-weight: 600;
            color: #272D32;
        }
        section{
            // position: relative;
            background: #F7F7FA;
            border-radius: 5px;
            .panel{
                display: flex;
                .panel-main{
                    flex: 1;
                    header{
                        padding: 10px 5px 10px 10px;
                        font-size: 18px;
                        font-weight: 600;
                        color: #272D32;
                        line-height: 1.2;
                    }
                    main{
                        padding: 0 5px 0 10px;
                        margin-bottom: 10px;
                        font-size: 14px;
                        color: #ACB2C6;
                        p{
                            svg{
                                vertical-align: middle;
                                margin-right: 5px;
                            }
                        }
                    }
                }
                aside{
                    // position: absolute;
                    // top: 8px;
                    // right: 8px;
                    padding: 6px 0;
                    width: 46px;
                    display: flex;
                    flex-direction: column;
                }
            }
            footer{
                border-radius: 0 0 5px 5px;
                display: flex;
                justify-content: space-between;
                 a{
                    width: 49.5%;
                    height: 40px;
                    background: #E3E8F2;
                    font-size: 14px;
                    line-height: 40px;
                    text-align: center;
                    color: #2383D8;
                    border-radius: 0 0 5px 0;
                 }
                 button{
                     width: 49.5%;
                     height: 40px;
                     border: 0 none;
                     outline: 0 none;
                     background: #E3E8F2;
                     font-size: 14px;
                     color: #2383D8;
                     border-radius: 0 0 5px 0; 
                     &.disabled {
                         color: #64667F;
                         border-radius: 0 0 0 5px;
                     }
                 }
            }
            & + section{
                margin-top: 10px;
            }
        }
    }
    .more{
        text-align: center;
        button {
            margin: 22px 0 24px 0;
            border: 0 none;
            outline: 0 none;
            font-size: 14px;
            color: #64667F;
            background: transparent;
        }
        &.canLoad {
            button {
                color: #2383D8;
            }
        }
    }
}